<template>
  <div class="index-container  border-box">

    <a-row class="server-container" :gutter="24">
      <a-col :xs="24" :md="12" :sm="12" :lg="12" style="height:100%">
        <a-card title="CPU信息" :hoverable="true" :bordered="false" class="no-header">
          <a-progress stroke-linecap="square" :percent="cpuProgress" type="circle" class="progress-chart"/>
          <a-table :columns="columns" :data-source="cpuData" :pagination="false" :loading="tableLoading"
                   size="small" rowKey='key' >
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12" :sm="12" :lg="12" style="height:100%">
        <a-card title="系统内存信息" :hoverable="true" :bordered="false" class="no-header">
          <a-progress stroke-linecap="square" :percent="memProgress" type="circle" class="progress-chart"/>
          <a-table :columns="columns" :data-source="memData" :pagination="false" :loading="tableLoading"
                   size="small" rowKey='key'>
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="24" :sm="24" :lg="24" style="height:100%">
        <a-card title="系统jvm信息" :hoverable="true" :bordered="false"  class="no-header">
          <a-table :columns="columns" :data-source="jvmData" :pagination="false" :loading="tableLoading"
                   size="small" rowKey='key'>
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="24" :sm="24" :lg="24" style="height:100%">
        <a-card title="系统盘符信息" :hoverable="true" :bordered="false">
          <a-table :columns="sysFileColumns" :data-source="sysFileData" :pagination="false" :loading="tableLoading"
                   size="small">
            <template slot="resourceUtilization" slot-scope="text, record" >
              <a-progress :percent="record.resourceUtilization | progress" />
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="24" :sm="24" :lg="24" style="height:100%">
        <a-card title="系统信息" :hoverable="true" :bordered="false" class="no-header">
          <a-table :columns="columns" :data-source="sysData" :pagination="false" :loading="tableLoading"
                   size="small" rowKey='key'>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
  import lineChart from './lineChart';
  import ARow from "ant-design-vue/es/grid/Row";

  export default {
    name: "",
    components: {ARow, lineChart},
    filters:{
      progress(val){
        return parseFloat(val.replace('%',''))
      }

    },
    data() {
      return {
        data: '',
        tableData: [],
        tableLoading: false,
        columns: [
          {
            title: '',
            dataIndex: 'label',
          },
          {
            title: '',
            dataIndex: 'value',
          }],
        sysFileColumns:[
          {
            title: '文件类型',
            dataIndex: 'name',
          },
          {
            title: '剩余大小',
            dataIndex: 'usableSpace',
          },
          {
            title: '已经使用量',
            dataIndex: 'totalUsableSpace',
          },
          {
            title: '总大小',
            dataIndex: 'totalSpace',
          },
          {
            title: '盘符类型',
            dataIndex: 'type',
          },
          {
            title: '盘符路径',
            dataIndex: 'mount',
            width:240
          },
          {
            title: '资源的使用率',
            dataIndex: 'resourceUtilization',
            scopedSlots: {
              customRender: "resourceUtilization"
            },
          },
        ],
        cpuData: [],
        memData: [],
        jvmData:[],
        sysFileData:[],
        sysData:[],
        cpuProgress: 0,
        memProgress: 0,
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        this.tableLoading = true
        this.$post('/system/sysOshi/getOshiData').then((res) => {
          this.cpuData = this.toTableData(res.getCpuInfo)
          this.memData = this.toTableData(res.getMemInfo)
          this.jvmData = this.toTableData(res.getJvmInfo)
          this.sysFileData = res.getSysFileInfo
          this.sysData = this.toTableData(res.getSysInfo)
          this.cpuData.splice(2,1)
          this.memData.splice(1,1)
          this.cpuProgress = parseInt(res.getCpuInfo['cpu用户使用率'])
          this.memProgress = parseInt(res.getMemInfo['使用率'])
          this.tableLoading = false
        }).finally(() => {
        })
      },
      //将数据整理成需要的格式
      toTableData(value) {
        let tableData = []
        for (let key in value) {
          let item = {label: key, value: value[key]}
          tableData.push(item)
        }
        return tableData
      }
    },
  };
</script>

<style scoped lang="less">
  .chart-line {
    height: 400px;
    width: 100%;
  }

  /deep/ .no-header .ant-table-thead {
    display: none;
  }

  /deep/ .ant-table-tbody > tr > td {
    border: none;
  }
  /*/deep/ .sys-table .ant-table-thead {*/
    /*display: block;*/
  /*}*/
  .progress-chart {
    margin-bottom: 10px;
    display: flex;
    justify-content: center
  }
  /deep/ .ant-card{
    margin-bottom: 10px;
  }
  /deep/ .ant-progress-show-info .ant-progress-outer {
    margin-right: calc(-3em - 8px);
    padding-right: calc(3em + 8px);
  }
  /deep/ .ant-progress-text {
    width: 3em;
  }
  /deep/ .ant-progress-line{
    width: 98%;
  }
</style>
